<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lof JSliderNews 1.0 - Jquery 1.3</title>
<link rel="stylesheet" type="text/css" href="css/layout.css" />
<link rel="stylesheet" type="text/css" href="css/style1.css" />
<script language="javascript" type="text/javascript" src="js/jquery.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.easing.js"></script>
<script language="javascript" type="text/javascript" src="js/script.js"></script>
<script type="text/javascript">
 $(document).ready( function(){	
		var buttons = { previous:$('#lofslidecontent45 .lof-previous') ,
						next:$('#lofslidecontent45 .lof-next') };
						
		$obj = $('#lofslidecontent45').lofJSidernews( { interval : 4000,
												direction		: 'opacitys',	
											 	easing			: 'easeInOutExpo',
												duration		: 1200,
												auto		 	: false,
												maxItemDisplay  : 4,
												navPosition     : 'horizontal', // horizontal
												navigatorHeight : 32,
												navigatorWidth  : 80,
												mainWidth:980,
												buttons			: buttons} );	
	});
</script>

</head>
<body>
	<div id="container">
    		<h1><strong>Lof JSliderNews 1.0</strong> -  Jquery 1.3 & Easing plugin</h1>
       
 <p>
	<strong> Direction: Right - Left. The Navigator is the list of thumbnails.</strong> 
    The plugin allow to use the wheelup and wheeldown to previous|next item in the list
</p>       
<!------------------------------------- THE CONTENT ------------------------------------------------->
<div id="lofslidecontent45" class="lof-slidecontent" style="width:980px; height:340px;">
<div class="preload"><div></div></div>
 <!-- MAIN CONTENT --> 
  <div class="lof-main-outer" style="width:980px; height:340px;">
  	<ul class="lof-main-wapper">
  		<li>
        		<img src="images/thumbl_980x340.png" title="Newsflash 2" >           
                 <div class="lof-main-item-desc">
                <h3><a target="_parent" title="Newsflash 1" href="#Category-1">/ Newsflash 1 /</a> <i> — Monday, February 15, 2010 12:42</i></h3>
				<h2>Content of Newsflash 1</h2>
                <p>The one thing about a Web site, it always changes! Joomla! makes it easy to add Articles, content,...
                <a class="readmore" href="#">Read more </a>
                </p>
             </div>
        </li> 
       <li>
       	  <img src="images/thumbl_980x340_002.png" title="Newsflash 1" >           
          	 <div class="lof-main-item-desc">
                <h3><a target="_parent" title="Newsflash 2" href="#Category-2">/ Newsflash 2 /</a> 	<i> — Monday, February 15, 2010 12:42</i></h3>
                <h2>Content of Newsflash 2</h2>
                <p>Joomla! makes it easy to launch a Web site of any kind. Whether you want a brochure site or you are...
                <a class="readmore" href="#">Read more </a>
                </p>
             </div>
        </li> 
       <li>
       	  <img src="images/thumbl_980x340_003.png" title="Newsflash 3" >            
          	<div class="lof-main-item-desc">
                <h3><a target="_parent" title="Newsflash 3" href="#Category-3">/ Newsflash 3 /</a> 	<i> — Monday, February 15, 2010 12:42</i></h3>
                <h2>Content of Newsflash 3</h2>
                <p>With a library of thousands of free Extensions, you can add what you need as your site grows. Don't...
                <a class="readmore" href="#">Read more </a>
                </p>
             </div>
        </li> 
        <li>

       	  <img src="images/thumbl_980x340_004.png" title="Newsflash 5" >            
          	<div class="lof-main-item-desc">
                <h3><a target="_parent" title="Newsflash 4" href="#Category-4">/ Newsflash 4 /</a>	<i> — Monday, February 15, 2010 12:42</i></h3>
                <h2>Content of Newsflash 4</h2>
                <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...
                <a class="readmore" href="#">Read more </a>
                </p>
             </div>
        </li> 
        
        <li>

       	  <img src="images/thumbl_980x340_005.png" title="Newsflash 5" >            
          	<div class="lof-main-item-desc">
                <h3><a target="_parent" title="Newsflash 5" href="#">/ Newsflash 5 /</a>	<i> — Monday, February 15, 2010 12:42</i></h3>
               <h2>Content of Newsflash 5</h2>
                <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...
                <a class="readmore" href="#">Read more </a>
                </p>
             </div>
        </li> 
        <li>

       	  <img src="images/thumbl_980x340_006.png" title="Newsflash 5" >            
          	<div class="lof-main-item-desc">
                <h3><a target="_parent" title="Newsflash 6" href="#">/ Newsflash 6 /</a>	<i> — Monday, February 15, 2010 12:42</i></h3>
                <h2>Content of Newsflash 6</h2>
                <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...
                <a class="readmore" href="#">Read more </a>
                </p>
             </div>
        </li> 
         <li>
       	  <img src="images/thumbl_980x340_007.png" title="Newsflash 5" >            
          	<div class="lof-main-item-desc">
                <h3><a target="_parent" title="Newsflash 7" href="#">/ Newsflash 7 /</a>	<i> — Monday, February 15, 2010 12:42</i></h3>
                <h2>Content of Newsflash 7</h2>
                <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...
                <a class="readmore" href="#">Read more </a>
                </p>
             </div>
        </li> 
          <li>
       	  <img src="images/thumbl_980x340_008.png" title="Newsflash 8" >            
          	<div class="lof-main-item-desc">
                <h3><a target="_parent" title="Newsflash 8" href="#">/ Newsflash 8 /</a>	<i> — Monday, February 15, 2010 12:42</i></h3>
                <h2>Content of Newsflash 8</h2>
                <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...
                	<a class="readmore" href="#">Read more </a>
                </p>
             </div>
        </li> 
      </ul>  	
  </div>
  <!-- END MAIN CONTENT --> 
    <!-- NAVIGATOR -->
<div class="lof-navigator-wapper">

        <div onclick="return false" href="" class="lof-next">Next</div>
      <div class="lof-navigator-outer">
            <ul class="lof-navigator">
               <li><img src="images/thumbs/thumbl_980x340.png" /></li>
               <li><img src="images/thumbs/thumbl_980x340_002.png" /></li>
               <li><img src="images/thumbs/thumbl_980x340_003.png" /></li>
               <li><img src="images/thumbs/thumbl_980x340_004.png" /></li>    
               <li><img src="images/thumbs/thumbl_980x340_005.png" /></li>
               <li><img src="images/thumbs/thumbl_980x340_006.png" /></li>       
               <li><img src="images/thumbs/thumbl_980x340_007.png" /></li>       
               <li><img src="images/thumbs/thumbl_980x340_008.png" /></li>       		
            </ul>
      </div>
        <div onclick="return false" href="" class="lof-previous">Previous</div>
 </div> 
  <!----------------- --------------------->
 </div> 
<script type="text/javascript">

</script>

<!------------------------------------- END OF THE CONTENT ------------------------------------------------->
 <p> 
<a href="index.html">Demo 1</a>  | <a href="index2.html">Demo 2</a>  |  <a href="index3.html">Demo 3</a> | <a href="index4.html">Demo 4</a> | <a href="index5.html">Demo 5</a> | <a href="index6.html">Demo 6</a>
<div id="footer">
 <a href="http://landofcoder.com">LandOfCoder.Com</a>
</div>
    </div>
</body>
</html>
